// namespace: "Footer" 
<template>
  <div class="tood-footer">
    <div class="left">
      <label>
        <input type="checkbox" v-model="isCheckedAll" />
      </label>
      <span>
        <span>已选中 {{count}}</span>
        / 全部 {{todos.length}}
      </span>
    </div>
    <button @click="clear">清除已完成任务</button>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref, computed } from "vue";
import { Todo } from "../interface/Todos";
export default defineComponent({
  name: "Footer",
  props: {
    todos: {
      // 规定：传递过来的todos，格式必须为Todo数据类型的数组 且为必传项
      type: Array as () => Todo[],
      required: true
    },
    checkedAll: {
      type: Function,
      required: true
    },
    clearChecked: {
      type: Function,
      required: true
    }
  },
  setup(props) {
    // 统计已选择的数量
    const count = computed(() => {
      return props.todos.reduce(
        (pre, todo, index) => pre + (todo.isChecked ? 1 : 0),
        0
      );
    });

    // 全选按钮状态
    const isCheckedAll = computed({
      get() {
        // 如果已选数据长度不为0，且和todos长度一致，则返回true；反之false
        return count.value && count.value === props.todos.length;
      },
      set(val) {
        // 当手动选中 | 取消选中，需操作所有数据进行 全选 | 取消选择
        props.checkedAll(val);
      }
    });

    // 点击清除完成按钮
    const clear = () => {
      props.clearChecked();
    };
    return {
      count,
      isCheckedAll,
      clear
    };
  }
});
</script>
<style lang="scss" scoped>
.tood-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 10px;
  height: 40px;
  line-height: 40px;
  .left {
    label {
      margin-right: 10px;
    }
  }
  button {
    height: 25px;
  }
}
</style>